<template>
  <el-card>
    <!-- <el-calendar>
       -->
    <div class="calendar-cell" v-for="(item, i) in dataList" :key="i">
      <!-- 显示日期（仅天） -->
      <div class="day-number">
        {{ item.dataDate.split("-").slice(2).join("-") }}
      </div>

      <!-- 查找匹配的日期数据 -->
      <template v-if="item.dataDate">
        <el-slider
          v-model="item.targetAmount"
          :min="0"
          :max="1000"
          :step="10"
          show-input
          input-size="small"
          class="day-slider"
          @change="handleSliderChange(data.day)"
        >
          <template #suffix>
            <span class="slider-suffix">元</span>
          </template>
        </el-slider>
      </template>

      <!-- 无数据时的占位 -->
      <div v-else class="no-data">-</div>
    </div>

    <!--</el-calendar> -->
  </el-card>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      required: true,
      validator: (arr) =>
        arr.every(
          (item) => item.dataDate && typeof item.targetAmount === "number"
        ),
    },
  },
  // computed: {
  //   // 将数组转换为日期为key的映射表
  //   dateMap() {
  //     return this.dataList.reduce((acc, cur) => {
  //       acc[cur.dataDate] = cur;
  //       return acc;
  //     }, {});
  //   },
  // },
  methods: {
    handleSliderChange(date) {
      this.$emit("change", {
        date,
        amount: this.dateMap[date].targetAmount,
      });
    },
  },
};
</script>

<style scoped>
.calendar-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2px;
}

.day-number {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
}

.day-slider {
  flex: 1;
}

::v-deep .el-slider__runway {
  margin: 8px 0;
}

::v-deep .el-slider__input {
  width: 80px !important;
}

.slider-suffix {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}

.no-data {
  color: #ccc;
  font-size: 12px;
  text-align: center;
  padding: 8px 0;
}
</style>